<template>
    <view class="page_main">
        <!-- 动态占位高度 -->
        <view :style="{ height: navBarHeight + 'px' }"></view>
        <!-- 用户信息 -->
        <view class="my_info">
            <!-- 已登录显示用户信息 -->
            <template v-if="userInfo">
                <img class="cover" :src="userInfo.headImgUrl" alt="用户头像">
                <view class="info">
                    <view class="text">
                        <view class="name">{{ userInfo.userName }}</view>
                        <view class="tel">{{ userInfo.phone }}</view>
                    </view>
                    <uni-icons type="right" size="30"></uni-icons>  
                </view>
            </template>
            <!-- 未登录状态 -->
            <template v-else>
                <img class="cover" src="http://img.abatour.com/2025-05-13/mian-renwu_1747114931637.png" alt="默认头像">
                <view class="login_btn" @click="toLogin">未登录</view>
            </template>
        </view>
        <!-- 我的订单 -->
        <view class="my_order">
            <view class="title">
                <view class="label">我的订单</view>
                <view class="icon" @click="toOrderList">
                    <text>全部</text><uni-icons type="right" size="14"></uni-icons>
                </view>
            </view>
            <view class="menu_list">
                <view class="menu_item" v-for="(item,index ) in menuList" :key="index">
                    <wd-badge modelValue="0">
                        <img class="img" :src="item.img" alt="">
                    </wd-badge>
                    <view class="text">
                        {{ item.label }}
                    </view>
                </view>  
            </view> 
        </view>
        <!-- 优惠券&需求管理 -->
        <view class="content">
            <view class="content_item">
                <view class="label">我的优惠券</view>
                <view class="text">
                    <text class="txt">3张</text>
                    <uni-icons type="right" size="14" color="#fff"></uni-icons> 
                </view>  
            </view> 
            <view class="content_item">
                <view class="label">需求管理</view>
                <view class="text">
                    <text class="txt">查看</text>
                    <uni-icons type="right" size="14" color="#fff"></uni-icons> 
                </view> 
            </view> 
        </view>
        <!-- 更多服务 -->
        <view class="more">
            <view class="title">更多服务</view>
            <view class="more_list">
                <view class="item" v-for="(item,index) in moreList" :key="index">
                    <img class="img" :src="item.img" alt="">
                    <view class="label">{{ item.label }}</view> 
                </view> 
            </view>  
        </view>  
    </view>
    <view class="bottom-safe"></view>
    <TabBar></TabBar>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import TabBar from "@/components/TabBar/index.vue";

const statusBarHeight = ref(0);
const navBarHeight = ref(0);
const userInfo = ref(null); // 用户信息响应式数据
const menuList =ref([
    {label:'待付款',img:'http://img.abatour.com/2025-05-13/组件.cdr_422_1747115366701.png'},
    {label:'待确认/发货',img:'http://img.abatour.com/2025-05-13/组件.cdr_430_1747115442347.png'},
    {label:'待使用/收货',img:'http://img.abatour.com/2025-05-13/组件.cdr_443_1747115473443.png'},
    {label:'退款/售后',img:'http://img.abatour.com/2025-05-13/图层 627_1747115515287.png'},
])

const moreList =ref([
    {label:'出行人管理',img:'http://img.abatour.com/2025-05-13/yiyouchuxingren01_1747121075994.png'},
    {label:'收货地址',img:'http://img.abatour.com/2025-05-13/shouhuodizhi_1747121120223.png'},
    {label:'意见反馈',img:'http://img.abatour.com/2025-05-13/fankuiyijianfankui-xianxing_1747121147281.png'},
    {label:'关于平台',img:'http://img.abatour.com/2025-05-13/wode-guanyuwomen_1747121171600.png'},
    {label:'用户协议',img:'http://img.abatour.com/2025-05-13/yonghuxieyi_1747121196096.png'},
    {label:'开票历史',img:'http://img.abatour.com/2025-05-13/a-16kaipiaolishi_1747121216982.png'},
])
const checkLogin = () => {
  try {
    const value = uni.getStorageSync('userInfo');
    if (value) {
      userInfo.value = value;
    }
  } catch (e) {
    console.error('获取存储失败:', e);
  }
};

const toLogin = () => {
//   uni.navigateTo({
//     url: ''
//   });
};

onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;

  let menuButtonInfo = null;
  // #ifdef MP-WEIXIN
  menuButtonInfo = uni.getMenuButtonBoundingClientRect();
  // #endif

  if (menuButtonInfo) {
    // 微信胶囊计算：状态栏高度 + 胶囊高度 + 间距
    const padding = 8; // 根据实际情况调整
    navBarHeight.value = menuButtonInfo.bottom + padding;
  } else {
    // 其他平台使用默认导航栏高度
    navBarHeight.value = statusBarHeight.value + 44;
  }
  checkLogin(); // 初始化时检查登录状态
});

//跳转订单列表
const toOrderList =()=>{
    uni.navigateTo({
        url: '/premiumRouteSubPack/pages/myOrder/index'
    });
}
</script>

<style lang="scss" scoped>
.page_main{
    height: 100vh;
    background: linear-gradient(to bottom, #1b9c61, #eeefe7) no-repeat;
    background-size: 100% 200rpx; 
    background-color: #eeefe7; 
    .my_info{
        display: flex;
        align-items: center;
        padding: 30rpx 28rpx;
        .cover{
            width: 104rpx;
            height: 104rpx;
            border-radius: 50%;
            margin-right: 33rpx;
        }
        .info{
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .text{
                .name{
                    font-size: 29rpx;
                    font-weight: bold;
                    margin-bottom: 9rpx;
                }
                .tel{
                    font-size: 25rpx;
                }
            }
        }
        .login_btn{
            font-size: 33rpx;
            font-weight: bold;
        }
    }
    .my_order{
        padding: 28rpx 28rpx 61rpx;
        margin: 28rpx;
        background: #fff;
        border-radius: 10rpx;
        .title{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .label{
                font-size: 29rpx;
                font-weight: bold;
            }
            .icon{
                font-size: 25rpx;
                display: flex;
                align-items: center;
                text{
                    margin-right: 10rpx;
                }
            }
        }
        .menu_list{
            margin-top: 57rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .menu_item{
                text-align: center;
                .img{
                    width: 67rpx;
                    height: 59rpx;
                }
                &:first-child{
                    .img{
                        width: 66rpx;
                        height: 67rpx;
                    }
                }
                &:nth-child(2){
                    .img{
                        width: 65rpx;
                        height: 61rpx;
                    }
                }
                &:nth-child(3){
                    .img{
                        width: 70rpx;
                        height: 61rpx;
                    }
                }
                .text{
                    font-size: 25rpx;
                    margin-top: 20rpx;
                }
            }
        }
    }
    .content{
        padding: 0 28rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .content_item{
            flex: 1;
            height: 194rpx;
            background: url('http://img.abatour.com/2025-05-13/组件.cdr_1503_1747119807436.png');
            background-size: 100% 100%;
            padding: 47rpx 27rpx;
            box-sizing: border-box;
            color: #fff;
            .label{
                font-size: 33rpx;
                font-weight: bold;
            }
            .text{
                font-size: 25rpx;
                margin-top: 15rpx;
                display: flex;
                align-items: center;
                .txt{
                    margin-right: 10rpx;
                }
            }
            &:nth-child(2){
                margin-left: 28rpx;
                background: url('http://img.abatour.com/2025-05-13/组件.cdr_1552_1747119840645.png');
                background-size: 100% 100%;
            }
        }
    }
    .more{
        margin: 28rpx;
        background: #fff;
        border-radius: 10rpx;
        padding: 48rpx 28rpx;
        .title{
            font-size: 29rpx;
            font-weight: bold;
        }
        .more_list{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            width: 100%;
            box-sizing: border-box;
            margin-top: 48rpx;
            .item{
                text-align: center;
                width: calc(100%/4);
                margin-bottom: 33rpx;
                .img{
                    width: 48rpx;
                    height: 48rpx;
                    object-fit: cover;
                }
                .label{
                    font-size: 25rpx;
                    margin-top: 20rpx;
                }
            }
        }
    }
    .bottom-safe {
      height: 200rpx;
      width: 100%;
    }
}
</style>